<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition" inline="true"
                 class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;" @change="srcschoolchange"  v-model="formData.srcschoolid"  placeholder="原校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;"   v-model="formData.srcename" placeholder="原老师">
                        <el-option
                            v-for="item in srcempsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;" v-model="formData.srcperiod" placeholder="原上课时间">
                        <el-option
                            v-for="item in periodList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input size="mini"
                              style="width: 220px;"
                              placeholder="姓名"
                              prefix-icon="el-icon-search"
                              v-model="formData.name">
                    </el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;" v-model="formData.toschoolid" @change="toschoolchange"
                               placeholder="所属校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;"  v-model="formData.toename" placeholder="现老师">
                        <el-option
                            v-for="item in toempsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px;"  v-model="formData.toperiod" placeholder="现上课时间">
                        <el-option
                            v-for="item in periodList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>


            <el-button type="primary" @click="search" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>


            <div class="table_container">
                <el-table
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%">

                    <el-table-column
                        property="username"
                        label="姓名"
                        min-width="10%">
                    </el-table-column>
                    <el-table-column
                        property="srcschoolname"
                        label="原校区"
                        min-width="10%">
                    </el-table-column>
                    <el-table-column
                        property="srcename"
                        label="原老师"
                        min-width="10%">
                    </el-table-column>
                    <el-table-column
                        property="srcperiodname"
                        label="原时段"
                        min-width="10%">
                    </el-table-column>
                    <el-table-column
                        property="toschoolname"
                        label="现校区"
                        min-width="10%">
                    </el-table-column>
                    <el-table-column
                        property="toename"
                        label="现老师"
                        min-width="10%">
                    </el-table-column>
                    <el-table-column
                        property="toperiodname"
                        label="现时段"
                        min-width="10%">
                    </el-table-column>
                    <el-table-column
                        property="changetime"
                        label="换班时间"
                        :formatter="dateFormat"
                        min-width="10%">
                    </el-table-column>
                  <!--  <el-table-column
                        label="操作"
                        min-width="10%">
                    </el-table-column>-->
                </el-table>
                <div class="Pagination" style="text-align: left;margin-top: 10px;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="formData.pageno"
                        :page-size="20"
                        layout="total, prev, pager, next"
                        :total="count">
                    </el-pagination>
                </div>
            </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {changeClassLog, changeClassList,deleteChangeClassLog} from '@/api/getData'
    import {mapActions, mapState, mapGetters} from 'vuex'
    import * as moment from 'moment';

    export default {
        data() {
            return {
                srcempsList:[],
                toempsList:[],
                formData: {
                    srcschoolid: '',
                    srcperiodid: '',
                    srceid: '',
                    name: '',
                    toschoolid: '',
                    toperiodid: '',
                    toeid: '',
                    pageno:1,
                    pagesize:10,
                },
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            headTop,
        },

        mounted() {
            if(this.schoolList==null){
                this.getAllSchool();
            }
            if(this.periodList){
                this.getPeriod();
            }


        },
        created() {
            this.initData();
        },
        computed: {
            ...mapGetters(['schoolList','empschoolMap','onusertypeList','periodList'])
        },
        methods: {
            ...mapActions(['getPeriod','getAllSchool', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps']),
            deletelog(index,row){
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.confirmdelete(row);
                });

            },
            dateFormat:function(row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            async confirmdelete(row) {
                var data={"data":{"id":row.id}}
                await deleteChangeClassLog(data)
                this.initData();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            },
            search(){
              this.initData();
            },

            srcschoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.srcempsList.push(item);
                    });
                }
            },
            toschoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.toempsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.srcempsList.push(item);
                    });
                }
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.initData()
            },
            async initData() {
                const v = await changeClassLog({"data":this.formData});
                this.tableData = [];
                var list = v.data.values;
                this.count = v.data.totalCount;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.username = item.username;
                    tableData.srcschoolname = item.srcschoolname;
                    tableData.srcename = item.srcename;
                    tableData.srcperiodname = item.srcperiodname;
                    tableData.toschoolname = item.toschoolname;
                    tableData.toename=item.toename;
                    tableData.toperiodname=item.toperiodname;
                    tableData.changetime=item.changetime;

                    this.tableData.push(tableData);

                })
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
